﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>

        <!-- WinJS references -->
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/home/home.css" rel="stylesheet" />
    <script src="homecodebehind.js"></script>
    <script src="/pages/home/home.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="fragment homepage">
        <div id="sound-tile-template" data-win-control="WinJS.Binding.Template">
            <div data-win-bind="innerText: keyBind"></div>
            <div data-win-bind="innerText: soundName"></div>
        </div>

        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to FinFangFoom!</span>
            </h1>
        </header>

        <section aria-label="Main content" role="main" style="margin-top: 0px; margin-bottom: 71.11px;">
            <div id="list-view" data-win-control="WinJS.UI.ListView"
                data-win-options="{
                     itemDataSource: ViewModels.soundTiles.dataSource,
                     itemTemplate: select('#sound-tile-template'),
                     oniteminvoked: HomeCodeBehind.playSound,
                     onselectionchanged: HomeCodeBehind.addTilesSwipeEvent,
                     selectionMode: WinJS.UI.SelectionMode.single,
                     swipeBehavior: WinJS.UI.SwipeBehavior.select
                     }">
            </div>
        </section>

        <div class="appBarTop" data-win-control="WinJS.UI.AppBar" data-win-options="{layout:'custom',placement:'top'}">
            <header>
                <div id="piano-sounds" style="display: inline-block; margin: 20px; text-align: center;">
                    <img src="/images/piano.png" />
                    <h2>Piano Sounds</h2>
                </div>
                <div id="guitar-sounds" style="display: inline-block; margin: 20px; text-align: center;">
                    <img src="/images/guitar.png" />
                    <h2>Guitar Sounds</h2>
                </div>
                <div id="custom-sounds" style="display: inline-block; margin: 20px; text-align: center;">
                    <img src="/images/custom.png" />
                    <h2>Custom Sounds</h2>
                </div>
            </header>
        </div>

        <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="{disabled: true}">
            <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add from File',icon:'add',section:'selection',tooltip:'Add song/sound'}"></button>
            <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdMic',label:'Microphone',icon:'microphone',section:'selection',tooltip:'Record from microphone'}"></button>
        </div>
    </div>
</body>
</html>
